﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-reset.css" rel="stylesheet" />
    <link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/FlatLab/css/style.css" rel="stylesheet" />
    <link href="~/Content/FlatLab/css/style-responsive.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="~/Content/FlatLab/js/html5shiv.js"></script>
    <script src="~/Content/FlatLab/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="login-body">

    <div class="container">

        <form class="form-signin" action="@Url.Action("Login", "Home", new { area = "" })" method="post" id="formLogin">
            <h2 class="form-signin-heading">欢 迎 登 录</h2>
            <div class="login-wrap">
                <input type="text" class="form-control" placeholder="用户名" name="UserName" data-bind='value: UserName'>
                <input type="password" class="form-control" placeholder="密码" name="Password" data-bind='value: Password'>
                <label class="checkbox">
                    <input type="checkbox" value="remember-me"> 记住我
                    <span class="pull-right">
                        @*<a data-toggle="modal" href="#myModal"> Forgot Password?</a>*@

                    </span>
                </label>
                <button class="btn btn-lg btn-login btn-block" type="button" data-bind="click:Login">登 录</button>
                <p>or you can sign in via social network</p>
                <div class="login-social-link">
                    <span data-bind="text: Message"></span>
                </div>
                <div class="registration">
                    首次登录?
                    <a class="" href="registration.html">
                        创建帐号
                    </a>
                </div>

            </div>

            <!-- Modal -->
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Forgot Password ?</h4>
                        </div>
                        <div class="modal-body">
                            <p>Enter your e-mail address below to reset your password.</p>
                            <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">

                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                            <button class="btn btn-success" type="button">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->

        </form>
    </div>

    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>
    @Scripts.Render("~/bundles/knockout")
    <script>
        var data = { "UserName": 'admin', "Password": 'admin', "Message": '' }

        function viewModel() {
            var self = this;

            self.UserName = ko.observable(data.UserName).extend({
                required: { params: true, message: "请输入用户名" }
            });

            self.Password = ko.observable().extend({
                required: { params: true, message: "请输入密码" }
            });

            self.Message = ko.observable(data.Message);

            self.Login = function () {
                self.errors = ko.validation.group(self);
                if (self.isValid()) {
                    var ajaxFormOption = {
                        success: function (data) {
                            if (data.Code == 0) {
                                window.location.href = '/ManageArea/Home/Index';
                            } else {
                                self.Message = data.Message;
                            }
                        },
                        error: function (XMLResponse) {
                            //layer.msg("加载信息失败", { icon: 2 });
                            self.Message = "加载信息失败";
                        }
                    };
                    $("#formLogin").ajaxSubmit(ajaxFormOption);
                } else {
                    self.errors.showAllMessages();
                }
            };
        }

        $(document).ready(function () {
            var vm = new viewModel();
            ko.applyBindings(vm);
        })
    </script>
</body>
</html>
